<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>02jQuery初体验</title>
    <script src="./js/jquery-3.6.0.js"></script>
    <script>
        // 1.原生js
        /*
        window.onload = function () {
        	var btnObj = document.getElementById("btnId");
        	// alert(btnObj); // [object HTMLButtonElement]   ====>>>  dom对象
        	btnObj.onclick = function () {
        		alert("js 原生的单击事件");
        	}
        }*/

        // 2.jquery
        $(function () { // 表示页面加载完成 之后，相当 window.onload = function () {}
            var $btnObj = $("#btnId"); // 表示按id查询标签对象
            // alert($btnObj); // [object Object]
            $btnObj.click(function () { // 绑定单击事件
                alert("jQuery 的单击事件");
            });
        });
        // 等价于 ↓
        // $(document).ready(function () {});
    </script>
</head>
<body>

<button id="btnId">SayHello</button>

</body>
</html>